'use client'
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { CalendarIcon } from "@radix-ui/react-icons"
import React, { useRef } from "react";
import { zhCN } from "date-fns/locale";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { format } from "date-fns";
import { cn } from "@/lib/utils";

export default function PageShadui() {
    const [date, setDate] = React.useState<Date | undefined>(new Date())
    const [open, setOpen] = React.useState(true)
    const popoverRef = useRef(null)

    return <div className=" m-4 space-x-2">

        <Popover modal={false}
        >
            <PopoverTrigger asChild>
                <Button
                    variant={"outline"}
                    onClick={() => setOpen(true)}
                    className={cn(
                        "w-[240px] justify-start text-left font-normal",
                        !date && "text-muted-foreground"
                    )}
                >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {date ? format(date, "yyyy-MM-dd") : <span>Pick a date</span>}
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                    mode='single'
                    selected={date}
                    locale={zhCN}
                    onSelect={(val) => {
                        setOpen(false)
                        setDate(val)
                    }}
                    initialFocus
                />
            </PopoverContent>
        </Popover>
        <Button size='sm' className="" onClick={() => {
            if (!date) return
            console.log(format(date, "yyyy-MM-dd"));
        }}>查询</Button>


    </div>
}